// 职位投诉管理
<template>
  <div class="container">
    <el-row class="form-row">
      <el-form ref="form" :model="form" :inline="true" label-width="80px">
        <el-row>
          <el-col :span="18">
            <el-form-item label="状态：">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option v-for="(status, index) in statusOptions" :label="status.label" :value="status.value"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align:right;">
            <el-form-item>
              <el-button type="primary" @click="loadData()">查询</el-button>
              <el-button type="primary" @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="select-box">
        <el-button type="info" @click="feedback()">反馈</el-button>
        <el-button type="info" @click="cancelPosition()">取消职位</el-button>
      </div>
    </el-row>
    <el-row class="table-wrapper mt20">
      <el-table ref="multipleTable" :show-header="true" :data="tableData" height="532"
        @selection-change="handleSelectionChange" v-loading='loading'>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="jobName" label="举报职位" width="130" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" :href="'/#/JobHunting/jobdetail?id='+scope.row.jobId"
              target="_blank">
              {{scope.row.jobName}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="举报原因" show-overflow-tooltip></el-table-column>
        <el-table-column prop="companyName" label="所属单位" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="contact" label="联系人" width="120"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="110"></el-table-column>
        <el-table-column prop="mail" label="电子邮箱"></el-table-column>
        <el-table-column prop="statusText" label="状态" width="80"></el-table-column>
        <el-table-column prop="address" label="操作" width="110">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="feedback(scope.row)">反馈</el-button>
            <el-button type="text" size="small" @click="cancelPosition(scope.row)">取消职位</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :current-page="param.currentPage" :page-size="100"
        layout="prev, pager, next, jumper, sizes, total" :total="param.total" class="mt20">
      </el-pagination>
    </el-row>
    <!-- 反馈弹框 -->
    <el-dialog :visible.sync="feedbackVisible" width="30%" class="elDialog" :before-close="handleClose">
      <p slot="title" class="elDialog-header">
        <span>反馈</span>
      </p>
      <div class="elDialog-content">
        <el-form :model="feedbackForm" ref="feedbackForm" :rules="feedbackRules">
          <el-form-item label="回复内容" prop="reason">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="feedbackForm.reason"
              placeholder="请输入回复内容"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('feedbackForm')">取 消</el-button>
        <el-button type="primary" @click="save('feedbackForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getListPage, cancelJob, complaintFeedback } from '../../../api/complaint.js'
export default {
  name: '',
  data () {
    return {
      loading: false,
      // 控制反馈弹框
      feedbackVisible: false,
      feedbackForm: {
        reason: '', // 回复内容
        id: '',
        userId: '',
        companyId: '',
        companyName: '',
        jobId: '',
        jobName: '',
      },
      form: {
        // 状态
        status: ''
      },
      // 参数
      param: {
        currentPage: 1,
        size: 10,
        total: 0,
      },
      statusOptions: [
        { label: '未反馈', value: 0 },
        { label: '已反馈', value: 1 },
      ],
      // 选中的
      multipleSelection: [],
      feedbackRules: {
        reason: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' },
          { max: 500, message: '反馈内容字数不能超过500', trigger: 'blur' }
        ]
      },
      // 表格数据
      tableData: [],
    }
  },
  filters: {
    getName (val) {
      switch (val) {
        case 0:
          return '未反馈';
        default:
          return '已反馈';
      }
    }
  },
  created () {
    if (this.$route.query.status == 0) {
      this.form.status = Number(this.$route.query.status)
    }
    this.loadData();
    // 监听浏览器窗口高度的方法
    // window.addEventListener('resize', this.getHeight);
    // this.getHeight();
    // 获取默认路径
    this.url = process.env.VUE_APP_URL;
    // this.getExpressResume();
  },
  mounted () {
    // 初始化加载数据
    this.loadData()
  },
  methods: {
    // 初始化加载数据
    loadData () {
      this.loading = true;
      let query = new FormData();
      let condition = [];
      condition.push({ "column": "status", "type": "eq", "value": this.form.status })
      query.append('page', this.param.currentPage)
      query.append('size', this.param.size)
      query.append('condition', JSON.stringify(condition))
      // 获取职位投诉列表
      getListPage(query).then(res => {
        if (res.success) {
          this.loading = false;
          this.tableData = res.data.records || []
          this.param.total = res.data.total;
        } else {
          this.loading = false;
          this.$message.error(`${res.msg}`)
        }
      })
    },
    // 重置
    reset () {
      this.form.status = '';
      this.param.currentPage = 1;
      this.loadData()
    },
    // 选择项发生变话时触发
    handleSelectionChange (val) {
      console.log(val, '选择')
      this.multipleSelection = val;
    },
    // 反馈
    feedback (row) {
      if (row) { // 单个反馈
        this.feedbackVisible = true;
        this.feedbackForm.id = row.id;
        this.feedbackForm.userId = row.userId;
        this.feedbackForm.companyId = row.companyId;
        this.feedbackForm.companyName = row.companyName;
        this.feedbackForm.jobId = row.jobId;
        this.feedbackForm.jobName = row.jobName;
      } else { // 多个反馈
        if (this.multipleSelection.length < 1) {
          this.$message.error('请选择需要反馈的职位')
        } else {
          this.feedbackVisible = true;
        }
      }

    },
    // 取消职位
    cancelPosition (row) {
      if (row) { // 单个取消
        this.$confirm('取消后职位变为审核不通过状态, 求职者将不可见该职位，是否继续?', '取消职位', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let formData = new FormData();
          formData.append('jobIds', row.jobId);
          formData.append('companyIds', row.companyId);
          cancelJob(formData).then(res => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '取消职位成功!'
              });
              this.loadData();
            } else {
              this.$message.error(`${res.msg}`)
            }
          })

        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
      } else {
        if (this.multipleSelection.length == 0) {
          this.$message.error('请选择需要取消的职位!');
        } else {
          this.$confirm('取消后职位变为审核不通过状态, 求职者将不可见该职位，是否继续?', '取消职位', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let jobIds = [];
            let companyIds = [];
            let query = new FormData();
            this.multipleSelection.forEach(item => {
              jobIds.push(item.jobId)
              companyIds.push(item.companyId)
            })
            query.append('jobIds', jobIds.join(','))
            query.append('companyIds', companyIds.join(','))
            cancelJob(query).then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '取消职位成功!'
                });
                this.loadData();
              } else {
                this.$message.error(`${res.msg}`)
              }
            })

          }).catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });
          });
        }
      }

    },
    // 反馈表单提交
    save (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 反馈
          this.getComplaintFeedback();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 反馈
    getComplaintFeedback () {
      if (this.feedbackForm.id != '') { // 单个反馈
        let query = [];
        query.push(this.feedbackForm)
        // 走反馈接口
        this.feedbacked(query)
      } else { // 多个反馈
        let params = [];
        this.multipleSelection.forEach(item => {
          params.push({
            id: item.id,
            userId: item.userId,
            companyId: item.companyId,
            companyName: item.companyName,
            jobId: item.jobId,
            jobName: item.jobName,
            reason: this.feedbackForm.reason
          })
        })
        // 走反馈接口
        this.feedbacked(params)
      }

    },
    // 调反馈接口
    feedbacked (query) {
      complaintFeedback(query).then(res => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '职位反馈成功!'
          });
          this.handleClose()
          this.cancelForm()
          this.loadData();
          this.multipleSelection = [];
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    // 取消
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.feedbackVisible = false;
    },
    handleCurrentChange (current) {
      console.log('当前第' + current + '页')
      this.param.currentPage = current;
      this.loadData();
    },
    handleSizeChange (size) {
      console.log('每页显示' + size + '条')
      this.param.size = size;
      this.loadData();
    },
    // 关闭弹框回调
    handleClose () {
      this.$refs.feedbackForm.resetFields()
      this.feedbackVisible = false;
    },
    // 清空表单
    cancelForm () {
      this.feedbackForm = {
        id: '',
        userId: '',
        companyId: '',
        companyName: '',
        jobId: '',
        jobName: '',
        reason: '',
      }
    }
  },
  watch: {
    '$route.fullPath': function (val, oldVal) {
      this.$nextTick(() => {
        if (this.$route.query.status == 0) {
          this.form.status = this.$route.query.status
          this.loadData();
        }
      })
    }
  },
}
</script>
<style scoped>
.el-form .el-button {
    width: 85px;
}
.el-form {
    width: 100%;
    display: inline-block;
}
.select-box {
    text-align: right;
    padding-right: 8px;
}
.mt20 {
    margin-top: 20px;
}
.table-wrapper .el-table {
    font-size: 14px;
}
.table-wrapper .el-pagination {
    height: 30px;
    text-align: center;
}
.el-table /deep/th,
.el-table /deep/td {
    text-align: center;
}
.table-wrapper /deep/.el-table__empty-block {
    width: 99.5% !important;
    min-height: 396px !important;
}
.table-wrapper /deep/.el-table__empty-text {
    font-size: 18px;
}
</style>